<template>
		<view class="item_box" :class="[{'not_readed':!monitorData.isRead}]" hover-class="clicked">
			<view class="info" @click="enterMap(monitorData)">
				<view class="tit">
					<image class="alarm_level" :src="'../../static/img/alarm/alarm'+monitorData.alarmLevel[0]+'.png'" mode=""></image>
					<view class="flex_between_column">
						<view class="alarm_type">{{monitorData.alarmDesc}}</view>
						<view class="tagBox" :class="['tagBox'+monitorData.alarmLevel]">
							<text>{{transToLevelTxt(monitorData.alarmLevel[0])}}</text>
							<text>{{monitorData.monitorValue}}% VOL</text>
							<image v-if="monitorData.trend == 2" :src="'../../static/img/alarm/arrow_up'+monitorData.alarmLevel[0]+'.png'" mode=""></image>
							<image v-else-if="monitorData.trend == 1" :src="'../../static/img/alarm/arrow_down'+monitorData.alarmLevel[0]+'.png'" mode=""></image>
						</view>
					</view>
				</view>
				<view class="info_box">
					<view class="label">
						<image src="../../static/img/alarm/time.png" mode=""></image>
					</view>
					<view class="value" v-if="monitorData.monitorTime">{{monitorData.monitorTimeStr?monitorData.monitorTimeStr:monitorData.monitorTime}}</view>
					<view class="value" v-else>暂无数据</view>
				</view>
				<view class="info_box">
					<view class="label">
						<image src="../../static/img/alarm/pos.png" mode=""></image>
					</view>
					<view class="value" v-if="monitorData.alarmRoad">{{monitorData.alarmRoad}}</view>
					<view class="value" v-else>暂无数据</view>
					
				</view>
			</view>
	<!-- 		<button plain :style="{'color':monitorData.ravelFlag?'#999':'#428ee4'}" class="btn_box"  
			@click="removeAlarm(monitorData.alarmId)">
				{{monitorData.ravelFlag?'报警已解除':'报警解除'}}
			</button> -->
		</view>
</template>

<script>
import {mapActions, mapState} from 'vuex'
export default {
	data() {
		return {
			showSkeleton:true,
		};
	},
	props:{
		monitorData:{
			type:Object,
			default(){
				return {
					alarmLevel:'1级'
				}
			}
		},
	},
	computed:{
		...mapState({
			userInfo: ({ user }) => user.userInfo,
		}),
	},
	methods: {
		...mapActions('user',['setUserInfo']),
		transToLevelTxt(val){
			if(val == 1){
				return '高'
			}else if(val == 2){
				return '中'
			}else{
				return '低'
			}
		},
		removeAlarm(id){
			let vm = this
			if(this.monitorData.ravelFlag){
				return false
			}
			if(!this.userInfo.nickName){
				uni.showModal({
				    title: '提示',
				    content: '该操作需要登录，是否进行登录？',
				    success: function (res) {
				        if (res.confirm) {
				            uni.navigateTo({
				            	url:'../../pages/views/login/login'
				            })
							
				        } 
				    }
				});
			}else{
				uni.navigateTo({
					url:`/pages/views/removeAlarm/removeAlarm?id=${id}`
				})
			}
			// uni.getUserInfo({
			//     success: (res) => {
			// 		vm.setUserInfo(res.userInfo)
			// 		uni.navigateTo({
			// 			url:`/pages/views/removeAlarm/removeAlarm?id=${id}`
			// 		})
			//     }
			// })

		},
		enterMap(data){
			//console.log('--->',data)
			if(!data.isRead ){
				this.$api.saveAlarmRead({
					userName: this.userInfo.nickName,
					infoId:data.alarmId
				})
			}
			
			if(data.equipId && !data.ravelFlag){
				uni.setStorage({
					key:'equipId',
					data:data.equipId
				})
			}else{
				uni.removeStorage({
					key:'equipId'
				})
			}
			uni.setStorage({
				key:'monitorDetail',
				data,
				success() {
					uni.removeStorage({
						key:'realtimeMonitorDetail',
						success() {
							uni.switchTab({
								url:'/pages/tabbar/map/map'
							})
						}
					})
					
				}
			})
			uni.setStorage({
				key:'curMarkerId',
				data:data.markerId
			})

		}
	}
};
</script>

<style lang="scss" scoped>
</style>
